import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { requireAdmin } from "@/lib/session";
import { getOrganizationDetail } from "@/lib/queries/admin";
import { formatBytes, formatDate, formatMs, formatNumber, formatPercent, formatUsd } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Badge, StatusBadge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Stat, StatGrid } from "@/components/ui/stat";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { CopyButton } from "@/components/ui/copy-button";
import { Alert } from "@/components/ui/alert";
import { DateCell, KV, MarginText, Mono, NetworkBadge, Panel, PlanBadge, numCell } from "@/components/admin/primitives";
import { OrgLimitsForm, OrgProviderVisibilitySwitch, OrgSuspendSwitch } from "@/components/admin/org-actions";

export const dynamic = "force-dynamic";

export default async function AdminOrganizationDetail({ params }: { params: Promise<{ id: string }> }) {
  await requireAdmin();
  const { id } = await params;
  const d = await getOrganizationDetail(id);
  if (!d) notFound();
  const { org, stats30d: s } = d;
  const margin = s.revenue - s.cost;

  return (
    <>
      <div className="mb-4">
        <Button asChild variant="ghost" size="sm" className="-ml-2">
          <Link href="/admin/organizations">
            <ArrowLeft className="size-3.5" /> Organizations
          </Link>
        </Button>
      </div>
      <PageHeader
        eyebrow="Organization"
        title={
          <span className="flex flex-wrap items-center gap-2">
            {org.name}
            <PlanBadge plan={org.plan} />
            {org.suspended ? <StatusBadge status="suspended" /> : null}
            {org.providerVisibility ? <Badge variant="warning" dot>provider debug on</Badge> : null}
          </span>
        }
        description={
          <span className="inline-flex items-center gap-1">
            <Mono>{org.id}</Mono>
            <CopyButton value={org.id} size="icon-sm" className="size-6" />
            <span className="text-fg-subtle">· /{org.slug}</span>
          </span>
        }
        actions={
          <Button asChild variant="outline" size="sm">
            <Link href={`/admin/requests?org=${org.id}`}>Explore requests</Link>
          </Button>
        }
      />

      {org.suspended ? <Alert variant="danger" title="Suspended" className="mb-4">API access is blocked for this organization.</Alert> : null}

      <StatGrid cols={6} className="mb-6">
        <Stat label="Requests 30d" value={formatNumber(s.requests)} />
        <Stat label="Success" value={formatPercent(s.requests ? (s.successes / s.requests) * 100 : null)} />
        <Stat label="Revenue 30d" value={formatUsd(s.revenue)} />
        <Stat label="Upstream cost" value={formatUsd(s.cost)} />
        <Stat label="Margin" value={<MarginText value={margin} pct={s.revenue > 0 ? (margin / s.revenue) * 100 : null} />} />
        <Stat label="Bandwidth" value={formatBytes(s.bytes)} />
      </StatGrid>

      <div className="grid gap-6 lg:grid-cols-2">
        <Panel title="Controls" description="Every change is written to the audit log with your user id.">
          <div className="grid gap-5">
            <div className="grid gap-1.5">
              <div className="text-[13px] font-medium">Plan</div>
              <div className="flex items-center gap-2">
                <Badge variant="solid">Unlimited</Badge>
                <span className="text-[12.5px] text-fg-muted">private platform — plans are not configurable</span>
              </div>
            </div>
            <OrgProviderVisibilitySwitch orgId={org.id} enabled={org.providerVisibility} />
            <OrgSuspendSwitch orgId={org.id} suspended={org.suspended} />
          </div>
        </Panel>
        <div className="grid gap-6">
          <Panel title="Spend limits">
            <OrgLimitsForm orgId={org.id} softLimitUsd={org.softLimitUsd} hardLimitUsd={org.hardLimitUsd} />
          </Panel>
          <Panel title="Details">
            <KV
              items={[
                { label: "Owner", value: d.owner ? <Link href={`/admin/users/${d.owner.id}`} className="hover:underline">{d.owner.email}</Link> : "—" },
                { label: "Stripe customer", value: org.stripeCustomerId ?? "not linked", mono: true },
                { label: "Created", value: formatDate(org.createdAt) },
                { label: "Updated", value: formatDate(org.updatedAt) },
              ]}
            />
          </Panel>
        </div>
      </div>

      <Panel title="Members" flush className="mt-6">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>User</TableHead>
              <TableHead>Role</TableHead>
              <TableHead className="text-right">Joined</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {d.members.map((m) => (
              <TableRow key={m.userId}>
                <TableCell>
                  <Link href={`/admin/users/${m.userId}`} className="font-medium hover:underline">
                    {m.email}
                  </Link>
                  <span className="ml-2 text-fg-muted">{m.name}</span>
                </TableCell>
                <TableCell className="text-fg-muted">{m.role}</TableCell>
                <TableCell className="text-right">
                  <DateCell value={m.joinedAt} />
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Panel>

      <div className="mt-6 grid gap-6 xl:grid-cols-2">
        <Panel title="Projects" flush>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Project</TableHead>
                <TableHead>Env</TableHead>
                <TableHead className="text-right">Keys</TableHead>
                <TableHead className="text-right">Req 30d</TableHead>
                <TableHead className="text-right">Created</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {d.projects.length === 0 ? (
                <TableEmpty colSpan={5}>No projects.</TableEmpty>
              ) : (
                d.projects.map((p) => (
                  <TableRow key={p.id}>
                    <TableCell>
                      <Link href={`/admin/requests?project=${p.id}`} className="font-medium hover:underline">
                        {p.name}
                      </Link>
                      {p.archivedAt ? <Badge variant="outline" className="ml-2">archived</Badge> : null}
                      <div className="font-mono text-[11.5px] text-fg-subtle">{p.id}</div>
                    </TableCell>
                    <TableCell>
                      <Badge variant={p.environment === "development" ? "warning" : "success"} dot>
                        {p.environment}
                      </Badge>
                    </TableCell>
                    <TableCell className={numCell}>{p.keys}</TableCell>
                    <TableCell className={numCell}>{formatNumber(p.requests30d)}</TableCell>
                    <TableCell className="text-right">
                      <DateCell value={p.createdAt} />
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </Panel>
        <Panel title="API keys" description="Prefix and last 4 only. Plaintext keys are never stored." flush>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Key</TableHead>
                <TableHead>Project</TableHead>
                <TableHead>Mode</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Last used</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {d.keys.length === 0 ? (
                <TableEmpty colSpan={5}>No API keys.</TableEmpty>
              ) : (
                d.keys.map((k) => (
                  <TableRow key={k.id}>
                    <TableCell>
                      <div className="font-medium">{k.name}</div>
                      <Mono className="text-fg-muted">
                        {k.keyPrefix}…{k.last4}
                      </Mono>
                    </TableCell>
                    <TableCell className="text-fg-muted">{k.projectName ?? "—"}</TableCell>
                    <TableCell>
                      <StatusBadge status={k.mode} />
                    </TableCell>
                    <TableCell>{k.revokedAt ? <StatusBadge status="revoked" /> : k.expiresAt && k.expiresAt < new Date() ? <StatusBadge status="expired" /> : <StatusBadge status="active" />}</TableCell>
                    <TableCell className="text-right">
                      <DateCell value={k.lastUsedAt} />
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </Panel>
      </div>

      <Panel title="Recent requests" description="Latest 25. Cost is upstream; price is what the customer is billed." flush className="mt-6">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Request</TableHead>
              <TableHead>Domain</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Network</TableHead>
              <TableHead>Country</TableHead>
              <TableHead className="text-right">Latency</TableHead>
              <TableHead className="text-right">Cost</TableHead>
              <TableHead className="text-right">Price</TableHead>
              <TableHead className="text-right">When</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {d.recentRequests.length === 0 ? (
              <TableEmpty colSpan={9}>No requests yet.</TableEmpty>
            ) : (
              d.recentRequests.map((r) => (
                <TableRow key={r.id}>
                  <TableCell>
                    <Link href={`/admin/requests/${r.id}`} className="hover:underline">
                      <Mono>{r.id}</Mono>
                    </Link>
                  </TableCell>
                  <TableCell className="max-w-[220px] truncate">{r.domain}</TableCell>
                  <TableCell>
                    <StatusBadge status={r.status} />
                    {r.errorCode ? <span className="ml-1.5 font-mono text-[11.5px] text-fg-muted">{r.errorCode}</span> : null}
                  </TableCell>
                  <TableCell>
                    <NetworkBadge network={r.network} />
                  </TableCell>
                  <TableCell>
                    <Mono>{r.country ?? "—"}</Mono>
                  </TableCell>
                  <TableCell className={numCell}>{formatMs(r.latencyMs)}</TableCell>
                  <TableCell className={numCell}>{formatUsd(r.costUsd, true)}</TableCell>
                  <TableCell className={numCell}>{formatUsd(r.priceUsd, true)}</TableCell>
                  <TableCell className="text-right">
                    <DateCell value={r.createdAt} />
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Panel>

      <Panel title="Audit log" description="Last 30 entries scoped to this organization." flush className="mt-6">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>When</TableHead>
              <TableHead>Action</TableHead>
              <TableHead>Target</TableHead>
              <TableHead>Metadata</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {d.audit.length === 0 ? (
              <TableEmpty colSpan={4}>No audit entries.</TableEmpty>
            ) : (
              d.audit.map((a) => (
                <TableRow key={a.id}>
                  <TableCell>
                    <DateCell value={a.createdAt} relative={false} />
                  </TableCell>
                  <TableCell>
                    <Badge variant={a.action === "admin.action" ? "danger" : "default"}>{a.action}</Badge>
                  </TableCell>
                  <TableCell>
                    <Mono>{a.target ?? "—"}</Mono>
                  </TableCell>
                  <TableCell className="max-w-[420px] truncate font-mono text-[12px] text-fg-muted" title={a.metadata ? JSON.stringify(a.metadata) : undefined}>
                    {a.metadata ? JSON.stringify(a.metadata) : "—"}
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Panel>
    </>
  );
}